﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ViewInMap</title>
    <link href="<%= this.Url.Content("~/content/Global.css") %>" rel="Stylesheet" type="text/css" />

    <script type="text/javascript" language="javascript" src="<%=this.Url.Content("~/content/scripts/jquery-1.4.2.js") %>"></script>

    <script type="text/javascript" language="javascript" src="<%=this.Url.Content("~/content/default.js") %>"></script>

    <%--<script type="text/javascript" src="http://maps.google.cn/maps/api/js?sensor=false"></script>--%>

    <script type="text/javascript" language="javascript">
        // 全局根路径
        var appRootPath = '<%=this.Url.Content("~/") %>';
        var mapIconUrl = '<%=this.Url.Content("~/Content/gimgs/") %>';
        var lon;
        var lat;
        var myLatlng;
        var marker;
        var map;
        var miAZg = null; //绿色地图图标工厂
        var miAZr = null; //红色地图图标工厂
        var jsons = '<%=ViewData["jsons"] %>';
        var sid = '<%=ViewData["sid"] %>';
        var directionsService;
        var lineStrokeColor = "#00FF00"; //上班路线颜色
        var bd = 0; //上班方向
        var istxll = false; //标记传过来的坐标是否为0
        var imgdrag = '<%=this.Url.Content("~/Content/gimgs/marker_greenDot.png") %>';
        var gdragicon;
        var sname = '';

        function pageload() {
            loadRSInfo();
            $.getScript("http://maps.google.cn/maps/api/js?sensor=false&callback=map_init");
        }
        function map_init() {
            initialize();
        }
        function loadRSInfo() {
            var rname = '';
            try {
                jsons = eval(jsons);
            } catch (ex) { jsons = []; }
            if (jsons && jsons.length > 0) {
                if (jsons[0].bd == 1) {
                    lineStrokeColor = "#FF0000";
                    bd = 1;
                }
                for (i = 0; i < jsons.length; i++) {
                    if (jsons[i].sid == sid) {
                        rname = jsons[i].rname;
                        sname = jsons[i].sname;
                        lon = jsons[i].lon;
                        lat = jsons[i].lat;
                        break;
                    }
                }
            }
            document.getElementById("imgDrag0").src = imgdrag;
            document.getElementById("rsname").innerHTML = sname + '(' + rname + ')';
            if (lon == null || lon == 0 || lat == null || lat == 0) {
                istxll = true;//is teng xun lat lon
                //此坐标为深圳腾讯大厦
                lon = '113.93443465232849';
                lat = '22.540682224569103';
            }
            document.getElementById("txtLon").value = lon;
            document.getElementById("txtLat").value = lat;
        }
        //初始化地图
        function initialize() {
            directionsService = new google.maps.DirectionsService();
            gdragicon = new google.maps.MarkerImage(
              imgdrag,
              new google.maps.Size(24, 40),
              new google.maps.Point(0, 0),
              new google.maps.Point(12, 40),
              new google.maps.Size(24, 40));
              

            myLatlng = new google.maps.LatLng(lat, lon);
            var mapOptions = {
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: myLatlng
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

            miAZr = new MapIconAZ(mapIconUrl, 'marker_red');
            miAZg = new MapIconAZ(mapIconUrl, 'marker_green');

            //绘制路线
            var ll = drawRouteLine();
            var i = 0;
            marker = new google.maps.Marker({
                title: sname,
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: (istxll && (ll != null)) ? ll : myLatlng,
                icon: gdragicon
            });
            map.setCenter(marker.position);

            google.maps.event.addListener(marker, 'mouseup', function() {
                if (marker) {
                    document.getElementById("txtLon").value = marker.position.lng();
                    document.getElementById("txtLat").value = marker.position.lat();
                }
            });
        }

        //更新坐标
        function updLonLat() {
            try {
                window.parent.updLonLat(document.getElementById("txtLon").value, document.getElementById("txtLat").value);
                //关闭
                window.parent.showModel();
            } catch (ex) {alert("更新坐标失败！"); }
        }

        //绘制路线在地图上
        function drawRouteLine() {
            if (jsons == null || jsons.length <= 0)
                return null;
            var i = 0;
            var ss = [];
            for (i = 0; i < jsons.length; i++) {
                if (jsons[i].lon > 0 && jsons[i].lat > 0)
                    ss.push(jsons[i]);
            }
            i = 0;
            if (ss.length > 0) {
                var lls = new google.maps.LatLng(ss[i].lat, ss[i].lon);
                marker = new google.maps.Marker({
                    title: ss[i].sname,
                    map: map,
                    draggable: false,
                    animation: google.maps.Animation.DROP,
                    position: new google.maps.LatLng(ss[i].lat, ss[i].lon),
                    icon: (bd == 0 ? miAZg.next() : miAZr.next())
                });
                for (i = 1; i < ss.length; i++) {
                    marker = new google.maps.Marker({
                        title: ss[i].sname,
                        map: map,
                        draggable: false,
                        animation: google.maps.Animation.DROP,
                        position: new google.maps.LatLng(ss[i].lat, ss[i].lon),
                        icon: (bd == 0 ? miAZg.next() : miAZr.next())
                    });
                    var lle = new google.maps.LatLng(ss[i].lat, ss[i].lon);
                    drawRealRoute(lls, lle);
                    lls = lle;
                }
                return lls;
            }
            return null;
        }

        //绘制班车路线(沿实际路线)
        function drawRealRoute(s, e) {
            var start = s;
            var end = e;
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            var lineStrokeOpacity = 0.4;
            var lineStrokeWeight = 5;

            var drPolylineOptions = {
                strokeColor: lineStrokeColor,
                strokeOpacity: lineStrokeOpacity,
                strokeWeight: lineStrokeWeight
            };
            var directionsDisplay = new google.maps.DirectionsRenderer({ suppressMarkers: true, preserveViewport: false, polylineOptions: drPolylineOptions });
            directionsDisplay.setMap(map);
            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
                else {
                    directionsDisplay.setMap(null);
                    directionsDisplay = null;
                    var routeLine = new google.maps.Polyline({
                        path: [s, e],
                        strokeColor: lineStrokeColor,
                        strokeOpacity: lineStrokeOpacity,
                        strokeWeight: lineStrokeWeight
                    });
                    routeLine.setMap(map);
                }
            });
        }
        function setMeCenter() {
            if (map != null && marker != null)
                map.setCenter(marker.position);
        }
    </script>

</head>
<body onload="pageload()" style="width: 675px;">
    <div class="map_view_title" style="color: #999;">
        经度：<input type="text" id="txtLon" readonly="readonly" style="color:#999;"/>
        纬度：<input type="text" id="txtLat" readonly="readonly" style="color:#999;" />
        <input type="button" onclick="updLonLat()" value="更新站点坐标" />
        <br />
        请在地图上拖动<img alt="" title="点击居中" id="imgDrag0" style="cursor: pointer;" height="20px" src="" onclick="setMeCenter()" />设置 <span id="rsname" style="font-weight: bold;">
        </span>的坐标！
    </div>
    <div>
        <div id="map_canvas" style="width: 640px; height: 300px; text-align: left;">
           <div style="width:100%; text-align:center; padding-top:100px; ">
                <img src="<%=this.Url.Content("~/Content/gimgs/loading.gif")%>" /><br />
                <p>GoogleMap Loading......</p>
            </div>
        </div>
    </div>
</body>
</html>
